{% assign current = page.url | downcase | split: '/' %}

<nav role="navigation" class="usa-nav sidenav-mobile">
  <div class="usa-nav-inner">
    <button class="usa-nav-close">
      <img src="/assets/img/close.svg" alt="close">
    </button>
    <ul class="usa-sidenav-list usa-accordion">
      <li>
        <button class="usa-accordion-button"
          {% if page.category == 'UI components' %}
            class="usa-current"
          {% endif %}
          {% if page.category == 'UI components' %}
            {% unless page.path contains 'overview' %}
              aria-expanded="true"
            {% endunless %}
          {% else %}
            aria-expanded="false"
          {% endif %}
          aria-controls="side-nav-1">UI components</button>
        <ul id="side-nav-1" class="usa-sidenav-sub_list">
          <li>
            <a {% if page.url == '/' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/">Overview</a>
          </li>
          <li>
            <a {% if current[1] == 'typography' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/typography/">Typography</a>
          </li>
          <li>
            <a {% if current[1] == 'colors' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/colors/">Colors</a>
          </li>
          <li>
            <a {% if current[1] == 'grids' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/grids/">Grid</a>
          </li>
          <li>
            <a {% if current[1] == 'buttons' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/buttons/">Buttons</a>
          </li>
          <li>
            <a {% if current[1] == 'labels' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/labels/">Labels</a>
          </li>
          <li>
            <a {% if current[1] == 'tables' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/tables/">Tables</a>
          </li>
          <li>
            <a {% if current[1] == 'alerts' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/alerts/">Alerts</a>
          </li>
          <li>
            <a {% if current[1] == 'accordions' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/accordions/">Accordions</a>
          </li>
          <li>
            <a {% if current[1] == 'form-controls' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/form-controls/">Form controls</a>
          </li>
          <li>
            <a {% if current[1] == 'form-templates' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/form-templates/">Form templates</a>
          </li>
          <li>
            <a {% if current[1] == 'search-bar' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/search-bar/">Search bar</a>
          </li>
          <li>
            <a {% if current[1] == 'sidenav' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/sidenav/">Side navigation</a>
          </li>
          <li>
            <a {% if current[1] == 'headers' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/headers/">Headers</a>
          </li>
          <li>
            <a {% if current[1] == 'footers' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/footers/">Footers</a>
          </li>
        </ul>
      </li>
      <li>
        <button class="usa-accordion-button"
          {% if page.category == 'Getting started' %}
            class="usa-current"
          {% endif %}
          {% if page.category == 'Getting started' %}
            {% unless page.path contains 'overview' %}
              aria-expanded="true"
            {% endunless %}
          {% else %}
            aria-expanded="false"
          {% endif %}
          aria-controls="sidenav-2">Getting started</button>
        <ul id="sidenav-2" class="usa-sidenav-sub_list">
          <li>
            <a {% if page.url == '/getting-started/' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/getting-started/">Overview</a>
          </li>
          <li>
            <a {% if page.url contains 'getting-started/developers' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/getting-started/developers/">For developers</a>
          </li>
          <li>
            <a {% if page.url contains 'getting-started/designers' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/getting-started/designers/">For designers</a>
          </li>
          <li>
            <a {% if page.url == '/download/' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/download">Download code and design files</a>
          </li>
        </ul>
      </li>
      <li>
        <a
        {% if page.title == 'Design principles' %}
          class="usa-current"
        {% endif %}
        href="{{ site.baseurl }}/design-principles/">Design principles</a>
      </li>
      <li>
        <button class="usa-accordion-button"
          {% if page.category == 'About our work' %}
            class="usa-current"
          {% endif %}
          {% if page.category == 'About our work' %}
            {% unless page.path contains 'overview' %}
              aria-expanded="true"
            {% endunless %}
          {% else %}
            aria-expanded="false"
          {% endif %}
         aria-controls="sidenav-3" {% if current[1] == 'about-our-work' %}class="usa-current"{% endif %}>About our work</button>
        <ul id="sidenav-3" class="usa-sidenav-sub_list">
          <li>
            <a {% if page.url == '/about-our-work/' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/about-our-work/">Overview</a>
          </li>
          <li>
            <a {% if page.url contains 'about-our-work/product-roadmap' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/about-our-work/product-roadmap/">Product roadmap</a>
          </li>
          <li>
            <a {% if page.url contains 'about-our-work/component-maturity-scale' %}class="usa-current"{% endif %} href="{{ site.baseurl }}/about-our-work/component-maturity-scale/">Component maturity scale</a>
          </li>
        </ul>
      </li>
    </ul>
    {% include download-buttons.html %}
  </div>
</nav>
